<template>
	<div class="collect">
		<!-- 头部导航栏 -->
		<van-nav-bar fixed placeholder title="我的收藏" left-text="返回" left-arrow @click-left="$router.back()">
		</van-nav-bar>
		<!-- 主体 -->
		<van-swipe-cell v-for="item in collectList" :key="item.id" right-width="80">
			<!-- 组件 -->
			<MyPost :post="item"></MyPost>
			<!-- 删除模块 -->
			<template #right>
				<van-button type="danger" text="取消收藏" class="Delbtn" @click="delCollect(item.id)" />
			</template>
		</van-swipe-cell>
		<van-empty description="暂无收藏" v-if="!collectList.length"/>
	</div>
</template>

<script>
	import MyPost from '../components/MyPost.vue'
	import { updatePostcollectApi } from '../apis/news.js'
	import {
		collectListApi
	} from '../apis/user.js'
	export default {
		data() {
			return {
				collectList: []
			}
		},

		components: {
			MyPost
		},

		async created() {
			await collectListApi()
				.then(res => {
					this.collectList = res.data.data.map(item => {
						return {
							...item,
							comment_length: item.comments.length
						}
					});
					console.log(res)
				})
		},

		methods: {
			delCollect(id) {
				console.log(id);
				this.$dialog.confirm({
						title: '取消收藏',
						message: '确认要取消收藏吗？',
						theme: 'round-button'
					})
					.then(async() => {
						// on confirm
						/* 界面 */
						this.collectList = this.collectList.filter(item => {
							return item.id !== id
						});
						/* 后端 */
						await updatePostcollectApi(id);
					})

					.catch(() => {});
			}
		}
	}
</script>

<style lang="less" scoped>
	.collect {
		.Delbtn {
			height: 100%;
			padding-left: 11px;
		}
	}
</style>
